Diseño de Interfaces de Usuario 


Tema 3 | 


o Introducción 

o Diseño centrado en el usuario 
o Escenarios 

o Análisis de tareas 

o Prototipado 

o Diseño orientado a objetos 

o Estilos de interacción 

o Paradigmas 


3.1. Introducción 


<>Participantes 


o Usuario 


+ Participante con capacidad de elección. Su capacidad de elección puede estar limitada (por 
conocimientos, experiencia, habilidad, etc.) 


o Ordenador 
+ Participante con un programa (secuencia de instrucciones) 
+ Enlace con aplicación 
o Diseñador 
+ Anticipa las posibles elecciones del usuario y las codifica en el programa. 
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<> Objetivo: 


o basado en el conocimiento del dominio del trabajo y el papel que las personas 
desempeñan cuando interaccionan con las computadoras, realizando programas que 


faciliten la labor humana 


o Basado en: 
+ Conocer al usuario 
+ Diseño participativo 
+ Análisis etnográfico 


< Factores de estudio 


o Los usuarios 
+ Peculiaridades 
+ Funciones a desempeñar 
O Las tareas 
+ Objetivos a conseguir 
+ Modo de obtenerlos 
o El escenario 
+ Entorno físico (objetos) 
+ Entorno social (reglas, protocolos) 
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< Técnicas 


o Escenarios 
+ Etnografía 


o Modelado de usuarios / Roles 
(los casos de uso de UML engloban ambos pasos) 


o Análisis de tareas 


+ Conocimiento del usuario (aprendizaje) 
+ Rendimiento del usuario (ejecución) 


o Prototipado 
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3.2. Diseño centrado en el usuario 


Conocer: 
Usuarios y sus 
tareas 


Objetivos: 


Diseño de 


tareas: Evaluar 


Escenarios tareas 


Métodos: 


Etnografía 


Descripción de 
usuarios y tareas 


Producto: 


Diseño 


participativo 


Recorridos 
escenario 
de tareas 


Metaforas 


Prototipos 
de boceto 


Prototipos 
desechables 


Diseño 


Refinado 


Diseño 


Diseño 
completo 


gráfico 


Interfaces y | | Pruebas 
guías usabilidad 


Guías de Evaluación 
estilo Heurística 


Prototipos alta 
fidelidad 


Prototipos 
evaluable 


Sistema 
preliminar 
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r 
<> Que es: 
o Describe a un/os usuario/s usando artefactos para lograr un objetivo bajo unas 
determinadas circunstancias en un intervalo de tiempo [Nielsen90] 


<> Objetivo: 


o Visión basada en las actividad humana 


o Identifica 
+ Situaciones 
+ Agentes/ Actores con un objetivo 
+ Secuencias de acciones y eventos 
+ Cambio de objetivos 


<> Tipos: 


Textual (narrativo) 
Secuencia de pasos 


Narración particionada - - - 
E J.M.Carroll: “Making Use scenario-based design of human 
Diagramas (casos de USO...) computer Interaction”. MIT Press, 2000 


(0) 
lo) 
o 
o 
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3.3. Escenarios 


. . LA ” 
<> Ejemplo: Cajero automático 

o NARRATIVO El usuario se aproxima al cajero e inserta la tarjeta en la ranura. Para ello la debe 
insertar con la banda magnética hacia abajo. El cajero lee la tarjeta y solicita un código de 4 dígitos 
(PIN) y el usuario los introduce usando el teclado numérico. El cajero verifica el PIN y presenta 
diferentes opciones (...) de las cuales el usuario selecciona “retirada en efectivo' en el botón que hay 
junto a la opción. A continuación, el cajero indica la cantidad a desembolsar, dando la opción de 10, 
30 y 50€ u otra cantidad. El usuario elige otra cantidad, y la máquina solicita la cantidad, que el 
usuario introduce nuevamente con el teclado numérico y pulsa “aceptar para finalizar. El cajero 
verifica que hay suficiente cantidad para solicitar la petición. Si no hay, muestra un mensaje de 
“insuficiente fondos'. En caso contrario, devuelve la tarjeta, la cantidad solicitada y el comprobante. 


A 


Operador 


Cajero automático 


Transacción 
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<> Objetivo: Conocer al usuario 


o Tipo de usuario: 
+ Aspecto Social: Edad, Sexo, cultural, 
+ Motivación: Interés, entretenimiento, aprender, pasar el rato... 
+ Colectivo: médico, profesor, niños, programadores,... 
+ Discapacidades temporal o permanente: visual, acústica,... 


o Habilidades cognitivas 
+ Novato 
+ Experto 
+  Esporádico 


o Tareas: 
+ Uso: frecuente, esporádico, 
+ Modo: artefactos (código barras, perforadora, ) 
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<> Tareas 


o “Unidad significativa de trabajo en la actividad de una persona” 


<> Análisis de tareas 


o Estudio de lo que un usuario tiene que realizar en términos de acciones y/o 
procesos para conseguir un objetivo. 


<> Objetivo 


Identificar usuarios 

Identificar sus intenciones: Qué quiere realizar el usuario? 
Comprensión del dominio del problema Qué acciones debe llevar a cabo? 
Establecer nivel de asistencia: Qué información es requerida? 
Establecer alternativas (rediseñar tarea) Cómo se hace en el ordenador? 
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3.4, Notaciones 


<> Objetivos 


o Describir el mecanismo de interacción 
Explorar diferentes soluciones 
Realizar análisis de usabilidad 
Comunicación con otras personas 


Métodos 
HTA 
GOMS 
GTA 
STN 
UAN 
KLM 
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3.4.1. Notaciones: HTA 


+ HTA 


o Describir Descripción mediante operaciones y planes 
o Operaciones: actividades que se realizan para alcanzar un objetivo 


o Planes: descripción de las condiciones que se deben cumplir para 
realizar cada actividad 


í Descripción plan 
Secuencia de Tareas | Pescripciór pla 


1 2 3 
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<> HTA: Ejemplo 


0 
Hacer té 


plan 0 
hacer 1 
al mismo tempo, si tetera llena, hacer 2 
3-4-5 
despues de 4-5 min. hacer 6 


3 ponerté | | 4poner agua 


5 6 
esperar servir elté 
en tetera en tetera P 


1 2 
calentar aqua| | vaciar tetera 


hacer 1.1-1.2-1.3-1.4 
cuando hierva el agua, hacer 1.5 


13 1.2 encender] | poner cazo | [14 1.5 apagar 
llenar el cazo tego jols esperar tego 
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<+ GOMS 


o Goals : Son los objetivos del usuario, y describen lo que pretende 
conseguir. Se puede evaluar el grado de satisfacción (logro) obtenido. 
Operaciones: Son las acciones básicas que se deben llevar a cabo 
para utilizar el sistema. Son dependientes del sistema 
Métodos: Descripción de las diferentes alternativas para la 
consecución del objetivo marcado 
Reglas Selección: Elección entre posibles alternativas para alcanzar 
un objetivo. Determinación de estrategias. 
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<> Ejemplo 


GOAL: CERRAR-VENTANA 
[select GOAL: USAR-METODO-CERRAR 
MOVER-RATON-A-CABECERA-VENTANA 
MENU-POPUP 
CLICK-SOBRE-OPCION-CERRAR 
GOAL: USAR-METODO-CERRAR-VENTANA-TECLADO 
PRESIONAR-TECLAS-ALT-F4 
GOAL: USAR-CERRAR-APLICACION 
PRESIONAR CONTROL-ALT-DEL 
SELECCIONAR CERRAR-APLICACIÓN ] 


Rule 1: Usar METODO-CERRRAR mientras no se aplique otra regla 
Rule 2: Usar CERRAR-APLICACIÓN si se queda bloqueado el sistema 
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<+ GTA 


o Método de análisis de tareas que contempla el contexto de 
uso: 
+ Usuarios 
+ Tareas 
+ Entorno físico (objetos, eventos) 
+ Entorno socio-cultural (roles, responsabilidades...) 
o Adecuado para descripción de tareas en grupo 


o Basado en una ontología universal (descripción conceptual y explicita de 
un dominio de conocimiento) 


o Posee herramientas de diseño y análisis (Euterpe) 


http://www.cs.vu.nl/martijn/gta 
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<+ Ontología universal de tareas 


usado por 
mn 


objeto 


evento 


esempeña 


agente 


dispara 
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3.5.3. Notaciones: GTA 


<+ Componentes 


o Tareas 


+ Es una actividad realizada por un agente (a través de un rol) para 
alcanzar un objetivo 


+ Produce un cambio en el entorno 

+ Requiere un periodo de tiempo para realizarlo 

+ Se puede descomponer en subtareas 

+ Puede ocurrir ante un acontecimiento (evento) 
o Objetos 

+ Elementos que intervienen en el sistema: 

+ Pueden ser físicos o lógicos 

+ Poseen atributos 

+ Se puede aplicar acciones (borrar, copiar...) 
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3.5.3. Notaciones: GTA 


<> Componentes 


o Rol 
+ Define un comportamiento humano dentro del sistema: 
+ Lo desempeña un agente 
+ Es responsable de una serie de tareas 
o Agente 
+ Entidad activa 
+ Tipo: humano, grupo, agente inteligente.. 
+ Pueden desempeñar uno o varios roles 
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„č Euterpe - [Hierarchy Viewer - New GTA doc1] 
BY Fie Edit Insert view Window Help 


Dilem] ala alal fox] S2] 

Task | Object | Role | Agent | Event | 

Reservar hotel M, Selecionar v Seleccionar hotel M; Lista de ciudades 
Categoria —| Hotel 


Indicar datos reserva 


MA] Ml 


Double-click to edit, drag to move or copy 
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<> Diagrama de transición de estados 


o Representa estados y transiciones 
o Muestra acciones sobre el sistema 
o Identificar autor de la interacción (U,S,T) 


U: I(off) 


E ¡METETE E)) 
U: I(on) 


borrar obj. 


Portapapeles 
Contenido Vacio sin 


ortapapeles selección 
ds pap inicio 


Portapapeles 
Lleno y objeto 
arai Seleccionado 
limpia 
portapapeles 


vaciar Portapapeles 
Lleno sin 
selección 
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<> UAN 


o Representación de Objetos 
o Acciones físicas 
o Sensible al contexto 
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EE CU AA 
o o A 
A a 
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<> KLM 


o Modelo predictivo (medida de rendimiento) 

o Familia de GOMS 

o Medidas empíricas 
Operador Descripción Segundos 
K Buen mecanógrafo (135 ppm) 
(pulsación teclas) Habilidoso (90ppm) 


Normal (40ppm) 
Malo 


Apuntar con el ratón 
Ubicar las manos en teclado 


Dibujar un trazo 0.9Np+.0161p 
(N: n° segmentos, l: longitud) 


Preparación mental 1.35 
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<> CTT o 
o Modelo de tareas cooperativo 


o Uso de notación temporal (LOTOS) ón 


interacción 
usuario 


ada abstracta 
aplicación 


tarea cooperativa 


http://giove.cnuce.cnr.it/ctte. html 
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SELF 


o Operadores Temporales 


Activar T11:>>T2 T1 []>> T2 
Desactivar T1 [> T2 

Interrupción T1 |> T2 

Elección T1 [1] T2 

Iteración T1* 11 
Concurrencia T1 ||| T2 T1 |D] T2 
Opcional [T] 


E ope pee pe neet an a 


Dagan assis 
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<> Modelo Conceptual 
o Es una abstracción externa que describe, mediante diagramas y notaciones más o 
menos formales, el conocimiento que debe poseer una persona acerca de un sistema 
+ Asimilable 
+  Consistente 
+ Simple 


<> Modelo Mental 


o Es la abstracción del conocimiento interno que posee el usuario. 
+ Guía el proceso de aprendizaje 
+ Permite predecir el comportamiento del sistema 


<> Estructura del Modelo Conceptual 
o Modelo de caja negra 
o Modelo jerárquico 
o Basado en estados 
o Objetos y acciones 
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<> Características 


o Paradigma de desarrollo del software 


o Representación mediante objetos y mecanismos de 
manipulación (métodos) 
o Los componentes interactivos se diseñan como Objetos 


o Distinguir entre objetos intrínsecos (propios de la aplicación) 
y de control (del interfaz) 
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<> Acciones 


o Las acciones se disponen como un lenguaje de órdenes 
o Acciones: Seleccionar, Crear/Eliminar, Mover/Copiar, 


Modificar, Ver 


o Acciones de grupo: insertar, ordenar, eliminar... 


Modos de órdenes 


o Modo: estado que habilita un conjunto de tareas de 


interacción al usuario 
o Objeto-acción ó acción-objeto 
o Suministrar información de estado 
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<> Estilos 
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o Son los mecanismos básicos de diálogo humano- 


computadora 
o Estilos: 
+ Ordenes 
+ Menús 
+ Manipulación Directa 
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<> Ordenes 


o Uso de un lenguaje con sintaxis/semántica definida 
o Entrada por teclado / audio 


Menús 
o Presentación visual de las opciones en pantalla 
o Uso del apuntador 


<+ Manipulación directa 
o Representación visual de los obejtos 
o Manipulación física de los mismos 
o Acciones sensibles al contexto 
o Interfaz WIMP 
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3.8. Paradigmas 


<> Paradigma de interacción 


o Modelos de los que se deriva el sistema de interacción, y 
establece las características de la comunicación 

o Tipos: 

+ Escritorio 

+ Realidad Virtual 

+ Computación ubicua 

+ Realidad aumentada 
o Interacciones: 

+ Hombre-computador 

+ Computador-Entorno 

+ Hombre-Entorno 
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